<template>
    <div class="AddFl">
        <h2>患者跟进</h2>
        <div class="operatingBox">
            <el-button type="info" icon="el-icon-arrow-left" size="small" @click="goBackFl">返回</el-button>
        </div>
        <div class="formBox">
            <!-- <el-button type="info" size="small" icon="el-icon-arrow-left" @click="backToPrev">
                                        返回</el-button> -->
            <el-form size="small" class="addForm" :model="formData" ref="formData" :rules="rules">
                <el-row :gutter="20">
                    <el-col :span="12">
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">类型</span>
                            </span>
                            <el-select v-model="formData.type" placeholder="请选择" style="width: 100%;">
                                <el-option label="电话" value="0"></el-option>
                                <el-option label="邮件" value="1"></el-option>
                                <el-option label="信息" value="2"></el-option>
                                <el-option label="拜访" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">标题</span>
                            </span>
                            <el-input v-model="formData.title"></el-input>
                        </el-form-item>
                        <el-form-item prop="date">
                            <span slot="label">
                                <span class="labelText">跟进日期</span>
                            </span>
                            <el-date-picker v-model="formData.date" type="date" placeholder="选择日期时间"
                                style="width: 100%;">
                            </el-date-picker>
                            <!-- <el-input v-model="formData.date"></el-input> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">状态</span>
                            </span>
                            <el-select v-model="formData.status" placeholder="请选择" style="width: 100%;">
                                <el-option label="新跟进" value="0"></el-option>
                                <el-option label="已完成" value="1"></el-option>
                                <el-option label="进行中" value="2"></el-option>
                                <el-option label="已取消" value="3"></el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <span slot="label">
                                <span class="labelText">患者</span>
                            </span>
                            <el-input class="put" v-model="formData.name">

                            </el-input>
                            <el-button type="success" icon="el-icon-search" size="mini" class="btn"
                                @click="searchPatient_Follow" v-show="isShow">查找</el-button>
                        </el-form-item>
                        <el-form-item prop="nextDate">
                            <span slot="label">
                                <span class="labelText">下次跟进</span>
                            </span>
                            <el-date-picker v-model="formData.nextDate" type="date" placeholder="选择日期时间"
                                style="width: 100%;">
                            </el-date-picker>
                            <!-- <el-input v-model="formData.nextDate"></el-input> -->
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-form-item class="subBtn">
                    <el-button type="primary" @click="onSubmit('formData')">保存</el-button>
                    <el-button type="info" size="small" @click="resetForm('formData')">取消</el-button>
                </el-form-item>
            </el-form>

        </div>


        <!-- --查找的dialog-- -->
        <el-dialog title="" :visible.sync="dialogTableVisible">
            <el-card>
                <div class="dialog-header">
                    <span style="font-size: 20px;">查找患者</span>
                    <el-input placeholder="请输入内容" class="input-with-select" v-model="input1">
                        <el-button slot="append" icon="el-icon-search" @click="searchPa"></el-button>
                    </el-input>
                </div>
                <el-table :data="followData" v-loading="loading">
                    <el-table-column property="type" label="类型" width="80">
                        <template slot-scope="scope">
                            <div v-if="scope.row.type == 0">电话</div>
                            <div v-if="scope.row.type == 1">邮件</div>
                            <div v-if="scope.row.type == 2">信息</div>
                            <div v-if="scope.row.type == 3">拜访</div>
                        </template>
                    </el-table-column>
                    <el-table-column property="name" label="患者名称" width="100"></el-table-column>
                    <el-table-column property="sex" label="性别" width="100"></el-table-column>
                    <el-table-column property="age" label="年龄" width="80"></el-table-column>
                    <el-table-column property="phone" label="手机号码"></el-table-column>
                    <el-table-column property="idCard" label="身份证号码" width="100"></el-table-column>
                    <el-table-column property="userName" label="负责人" width="100"></el-table-column>
                    <el-table-column property="state" label="状态">
                        <template slot-scope="scope">
                            <el-tag disable-transitions type="success" v-if="scope.row.status == 1">进行中</el-tag>
                            <el-tag disable-transitions type="info" v-if="scope.row.status == 3">已取消</el-tag>
                            <el-tag disable-transitions type="primary" v-if="scope.row.status == 2">已完成</el-tag>
                            <el-tag disable-transitions type="warning" v-if="scope.row.status == 0">新跟进</el-tag>
                        </template>
                    </el-table-column>
                    <el-table-column label="操作" width="120" fixed="right">
                        <template slot-scope="scope">
                            <el-button type="success" size="mini" @click="choosePatient(scope.row)">
                                <i class="el-icon-plus"></i>
                                选择该患者
                            </el-button>
                        </template>
                    </el-table-column>
                </el-table>

                <!-- 分页器 -->
                <Pagination :total="total" :pageSize="pageSize" @getPagination="getPagination"></Pagination>
            </el-card>
        </el-dialog>
    </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { mapState } from 'vuex';

export default {
    name: 'AddPatientFl',
    components: {
        Pagination
    },
    computed: {
        ...mapState("editPatient", ['title', 'rowData'])
    },
    data() {
        return {
            //loading
            loading: false,
            isShow: true,
            //dialog是否打开
            dialogTableVisible: false,
            followData: [{
                id: "1",
                type: "私海",
                name: "小",
                sex: "女",
                age: "6",
                phone: "123",
                idCard: "12342",
                medicareNum: "456",
                province: "北京",
                address: "北京",
                userName: "111",
                createTime: "2022",
                updateTime: "",
                sysDiagnosislist: "",
                status: "有效",
                userId: 1,

            }],//dialog表格数据

            //搜索框内容
            input1: "",

            //表单数据
            formData: {
                // id: 1,
                patientId: 1,
                type: "",
                title: "",
                name: "",
                chargePerson: "",
                date: "",
                nextDate: "",
                // createTime: "",
                status: "",
                description: "",
                userId: sessionStorage.getItem("userID"),
                // updateTime: ""
            },

            //规则
            rules: {
                date: [
                    { required: true, message: '请选择日期', trigger: ['blur'] }
                ],
                nextDate: [
                    { required: true, message: '请选择日期', trigger: ['blur', 'change'] }
                ],
            },

            //表格的内容量共有几条
            total: 0,
            currentPage: 1,
            pageSize: 10,

            //--------页码判断-------普搜  所有列表
            a: "",

        };
    },


    mounted() {

    },
    created() {

    },


    methods: {
        goBackFl() {
            this.$router.push("/patient/paFollow")
        },


        //保存按钮功能  新增 修改
        onSubmit(formData) {
            this.$refs[formData].validate((valid) => {
                if (valid) {
                    this.followData.userId = sessionStorage.getItem("userID")
                    this.$api.patients.addFollow(this.formData)
                        .then((res) => {
                            
                            if (res.data.code === 200) {
                                //跳转到列表页面
                                this.$router.push("/patient/paFollow")
                                //提示
                                this.$message({
                                    message: '添加成功',
                                    type: 'success'
                                });
                            } else {
                                console.log("新增失败-------有误");
                                this.$message.error('添加失败');
                            }
                        }).catch(() => {
                            this.$message.error('添加失败');
                        })

                }else {
                    console.log('error submit!!');
                    return false;
                }
            })
            // console.log(sessionStorage.getItem("userID"),"33333333333");

        },

         //取消按钮
         resetForm(formData) {
            //跳转到列表页面
            this.$router.push('/patient/paManage')
            this.$refs[formData].resetFields();
        },

        //新增里的查看患者功能
        searchPatient_Follow() {
            this.dialogTableVisible = true;
            this.getAllPatientsList(this.currentPage, this.pageSize)

        },
        //查看患者列表
        async getAllPatientsList(currentPage, pageSize) {

            let res = await this.$api.patients.getPatientsList({ currentPage, pageSize })

            if (res.data.code === 200) {

                this.followData = res.data.data.list;
                console.log(res.data.data.list);
                //总数
                this.total = res.data.data.total;
                //加载loading
                this.loading = false;

                this.a = "所有"

            } else {
                console.log('请求失败');
                this.a = ""
                this.followData = [];
                this.pageSize = 0;
                this.total = 1;
            }
        },

        //获取页码
        getPagination(page) {
            this.currentPage = page;
            if (this.a == "所有") {
                this.getAllPatientsList(this.currentPage, this.pageSize)
            } else {
                this.searchPa(this.input1, this.currentPage, this.pageSize)
            }

        },
        //选择患者来跟进
        async choosePatient(row) {
            this.formData.name = row.name;
            this.formData.patientId = row.id
            this.dialogTableVisible = false;
            // console.log(this.formData.name);

        },

        //搜索患者

        async searchPa(name, currentPage, pageSize) {
            name = this.input1;
            currentPage = this.currentPage;
            pageSize = this.pageSize
            let res = await this.$api.patients.searchPatient(name, currentPage, pageSize)
            if (res.data.code === 200) {
                console.log(res.data.data.list);
                this.followData = res.data.data.list
                //总数
                this.total = res.data.data.total;
                this.a = "普搜"
            } else {
                console.log('请求失败');
                this.a = "",
                    this.followData = [];
                this.pageSize = 0;
                this.total = 1;
            }


        },

    },
};
</script>

<style scoped>
h2 {
    margin: 15px;

}

.operatingBox {
    background-color: white;
    margin: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 3px solid #ccc;
    border-radius: 5px;
}

.el-button {
    margin-top: 5px;
    margin-bottom: 5px;
    margin-left: 10px;
    margin-right: 10px;
}

.formBox {
    background-color: white;
    margin-left: 15px;
    margin-right: 15px;

}

.el-form {
    margin: 15px;

}


.labelText {
    text-align: left;
    float: left;
    font-size: 14px;
    font-weight: 600;
    color: black;
}




.put {
    position: relative;
}

.btn {
    position: absolute;
    right: 0px;
    bottom: -3px;
}

.subBtn {
    margin-top: 20px;
    padding-bottom: 20px;
}

.el-form-item--mini.el-form-item,
.el-form-item--small.el-form-item {
    margin-bottom: 10px;
}

.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    padding-top: 10px;
    border-top: 3px solid #ccc;
    border-bottom: 1px solid #ccc;
    /* border-left: 1px solid #ccc;
    border-right: 1px solid #ccc; */
}

.input-with-select {
    width: 200px;
}
</style>